<template>
  <div class="main">
    <!-- 标题 -->
    <img id="img" src="../assets/4.png" alt=""/>
    <div class="all">
      <!-- 左侧 -->
      <div>
        <!-- 左上 实验室 -->
        <div style="display: flex">
          <div class="labLeft">
            <!-- 实验室环境 -->
            <div class="labEnvironment">
              <div
                  style="width: 100%;height: 100%;color: #fff;font-size: 36px;display: flex;align-items: center;justify-content: center">
                <span style="margin-top: 15px">{{ now }}</span>
              </div>
            </div>
            <!-- 实验干预提醒 -->
            <div class="intervene">
              <div class="remindMain">
                <vue-seamless-scroll :class-option="defaultOption">
                  <div class="remind" v-for="(item, index) in notice_list" :key="index">
                    <div style="width: 250px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">
                      {{ item.message }}
                    </div>
                    <div id="new">
                      <div style="position: relative; left: 20px">{{ substr(item.create_time) }}</div>
                      <div class="tag" v-if="item.is_new === 1">
                        <span id="tagert">new</span>
                      </div>
                    </div>
                  </div>
                </vue-seamless-scroll>
              </div>
            </div>
          </div>
          <!-- 实验样品检测表 -->
          <div class="testingTable">
            <div class="testingTitle">
              <div class="centery">
                <img id="lll" src="../assets/lll.png" alt=""/>
                <div>{{ currentTitle() }}实验样品检测状态表</div>
                <img id="rrr" src="../assets/rrr.png" alt=""/>
              </div>
            </div>
            <table style="margin-left: 45px">
              <!-- 表头 -->
              <thead>
              <tr class="testingContent">
                <th style="width: 136px">样品号</th>
                <th style="width: 64px">数量</th>
                <th style="width: 64px">制备状态</th>
                <th style="width: 64px">拉断测试</th>
                <th style="width: 64px">弯曲测试</th>
                <th style="width: 64px">压缩测试</th>
                <th style="width: 64px">电磁测试</th>
              </tr>
              </thead>
              <!-- 表格 -->
              <tbody>
              <div style="overflow: auto; max-height: 300px">
                <div class="tableList" v-for="(item, index) in tableList" :key="index">
                  <div style="width: 136px;overflow: hidden">
                    <span>{{ item.sample_num }}</span>
                  </div>
                  <div style="width: 64px">
                    <span>{{ item.quantity }}</span>
                  </div>
                  <div style="width: 64px">
                    <span class="success" v-if="item.running_state === 2">进行中</span>
                    <span class="warning" v-else-if="item.order_value === 99">等待中</span>
                    <span class="info" v-else-if="item.running_state === 1">未开始</span>
                    <span class="blue" v-else-if="item.running_state === 3">已完成</span>
                    <span class="danger" v-else-if="item.running_state === 4">失败</span>
                  </div>
                  <div style="width: 64px">
                    <span v-if="item.tension === 1">未开始</span>
                    <span v-if="item.tension === 2">进行中</span>
                    <span v-if="item.tension === 3">已完成</span>
                    <span v-if="item.tension === 4">失败</span>
                    <span v-if="item.tension === 5">~</span>
                  </div>
                  <div style="width: 64px">
                    <span v-if="item.bending === 1">未开始</span>
                    <span v-if="item.bending === 2">进行中</span>
                    <span v-if="item.bending === 3">已完成</span>
                    <span v-if="item.bending === 4">失败</span>
                    <span v-if="item.bending === 5">~</span>
                  </div>
                  <div style="width: 64px">
                    <span v-if="item.compression === 1">未开始</span>
                    <span v-if="item.compression === 2">进行中</span>
                    <span v-if="item.compression === 3">已完成</span>
                    <span v-if="item.compression === 4">失败</span>
                    <span v-if="item.compression === 5">~</span>
                  </div>
                  <div style="width: 64px">
                    <span v-if="item.dc === 1">未开始</span>
                    <span v-if="item.dc === 2">进行中</span>
                    <span v-if="item.dc === 3">已完成</span>
                    <span v-if="item.dc === 4">失败</span>
                  </div>

                </div>
              </div>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 左下 设备监测 -->
        <div class="equipmentMonitoring">
          <!--          <img id="change" src="../assets/left.png" alt="" />-->
          <div class="equipmentList">
            <div class="unit">
              <img src="../assets/a1.jpg" class="ThreeImg" alt=""/>
              <div class="unitTxt">S-FRP 3D打印单元</div>
              <div class="testInfo">
                <div>
                  本年度实验量：
                  <span>{{test_num_and_sample_num.nums.unit1}}</span>
                </div>
                <div>当前实验号：{{test_num_and_sample_num.sample_number.unit1}}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy" v-if="sfrp_info.printer_status === ''">-</span>
                <span class="equyyy" v-else>{{sfrp_info.printer_status}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">真空状态</span>
                <span class="equyyy" v-if="sfrp_info.vacuum_status === ''">-</span>
                <span class="equyyy" v-else>{{sfrp_info.vacuum_status}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">腔室温度</span>
                <span class="equyyy">{{sfrp_info.temperatureInfo.chamber.current_temperature}}℃</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">底板温度</span>
                <span class="equyyy">{{sfrp_info.temperatureInfo.buildplate.current_temperature}}℃</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">打印进度</span>
                <span class="equyyy">{{(sfrp_info.printer_progress*100).toFixed(4)}}%</span>
              </div>
            </div>
            <div class="unit">
              <img src="../assets/a2.jpg" class="ThreeImg" alt=""/>
              <div class="unitTxt">HEA 3D打印单元</div>
              <div class="testInfo">
                <div>
                  本年度实验量：
                  <span>{{test_num_and_sample_num.nums.unit2}}</span>
                </div>
                <div>当前实验号：{{test_num_and_sample_num.sample_number.unit2}}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy">{{hea_info.devicestate}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">CNC状态</span>
                <span class="equyyy">{{hea_info.cncstate}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">成形仓压力</span>
                <span class="equyyy">{{hea_info.tankpressure}}mbar</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">工作气压</span>
                <span class="equyyy">{{hea_info.workgaspressure}}mbar</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">气缸气压</span>
                <span class="equyyy">{{hea_info.cylinderpressure}}mbar</span>
              </div>
            </div>
            <div class="unit">
              <img src="../assets/a3.png" class="ThreeImg" alt=""/>
              <div class="unitTxt">C-FRP成型及机加单元</div>
              <div class="testInfo">
                <div>
                  本年度实验量：
                  <span>{{test_num_and_sample_num.nums.unit3}}</span>
                </div>
                <div>当前实验号：{{test_num_and_sample_num.sample_number.unit3}}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy">{{cfrp_info.state}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">温度</span>
                <span class="equyyy">{{cfrp_info.temp}}℃</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">压机报警</span>
                <span class="equyyy">{{cfrp_info.ya_ji_alarm}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">PLC报警</span>
                <span class="equyyy">{{cfrp_info.plc_alarm}}</span>
              </div>
            </div>
            <div class="unit">
              <img src="../assets/a4.jpg" class="ThreeImg" alt=""/>
              <div class="unitTxt">力学表征单元</div>
              <div class="testInfo">
                <div>
                  本年度实验量：
                  <span>{{test_num_and_sample_num.nums.unit5}}</span>
                </div>
                <div>当前实验号：{{test_num_and_sample_num.sample_number.unit5}}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy">{{equip_info5.WCAIDM05.machineAct}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">上料许可</span>
                <span class="equyyy" style="font-size: 12px">
                  <span v-if="equip_info5.WCAIDM05.loadingPerm === 'True'">允许</span>
                  <span v-else>不允许</span>
                </span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">料盘状态</span>
                <span class="equyyy" style="font-size: 12px">
                  <span v-if="equip_info5.WCAIDM05.palletStatus === 'True'">有</span>
                  <span v-else>无</span>
                </span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">工装类型</span>
                <span class="equyyy" style="font-size: 12px">
                  <span v-if="equip_info5.WCAIDM05.fixtureType === '1'">拉伸</span>
                  <span v-if="equip_info5.WCAIDM05.fixtureType === '2'">弯曲</span>
                  <span v-if="equip_info5.WCAIDM05.fixtureType === '3'">压缩</span>
                  <span v-else>无夹具</span>
                </span>
              </div>
            </div>
            <div class="unit">
              <img src="../assets/a5.jpg" class="ThreeImg" alt=""/>
              <div class="unitTxt">电磁表征单元</div>
              <div class="testInfo">
                <div>
                  本年度实验量：
                  <span>{{test_num_and_sample_num.nums.unit4}}</span>
                </div>
                <div>当前实验号：{{test_num_and_sample_num.sample_number.unit4}}</div>
              </div>
              <div class="equipInfo">
                <span class="equxxx">设备状态</span>
                <span class="equyyy">{{equip_info4.DCIDM03.machineStatus}}</span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">上料许可</span>
                <span class="equyyy" style="font-size: 12px">
                  <span v-if="equip_info4.DCIDM03.loadingPerm === '1'">允许</span>
                  <span v-else>不允许</span>
                </span>
              </div>
              <div class="equipInfo">
                <span class="equxxx">料盘状态</span>
                <span class="equyyy" style="font-size: 12px">
                  <span v-if="equip_info4.DCIDM03.palletStatus === '1'">有</span>
                  <span v-else>无</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div>
        <!-- 复合材料3D打印 -->
        <div class="rightTablefh">
          <div id="fhcl"></div>
          <div class="intro">4料仓2喷头</div>
        </div>
        <!-- 金属3D打印 -->
        <div class="rightTablejs">
          <div id="jscl"></div>
          <div class="intro">5料仓4喷头</div>
        </div>
        <!-- 力学表征实验 -->
        <div class="rightTablelx">
          <div class="intro" style="padding: 15px 0 0 263px">
            <span style="padding-right: 50px">单位：N</span><span>{{unit5.sample_num}}</span>
          </div>
          <div class="lxbzbg">
            <div id="lxbz"></div>
          </div>
        </div>
        <!-- 电磁表征实验 -->
        <div class="rightTabledc">
          <div class="intro" style="padding: 15px 0 0 265px;position: relative">
<!--            <el-select v-model="series_index" size="mini" @change="onSeriesChange" style="position: absolute;right: 110px;top: 10px;width: 100px">-->
<!--              <el-option v-for="(s,s_idx) in series_list" :label="s.name" :value="s_idx"></el-option>-->
<!--            </el-select>-->
            <span style="padding-right: 50px">单位：ε'</span><span>{{unit4.sample_num}}</span>
          </div>
          <div class="dcbzbg">
            <div id="dcbz"></div>
<!--            <div style="color: #fff; font-size: 13px; text-align: center">-->
<!--              Frquency（GHz）-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from 'axios'

export default {
  components: {
    vueSeamlessScroll,
  },
  data () {
    return {
      series_index: -1,
      series_list: [],
      startValtemp: 0,
      endValtemp: 21,
      intervalId: null,
      tentativeId: null,
      fhData: [0,0,0,0],
      jsData: [0,0,0,0,0],
      dcbzData: [
        0.11, 0.26, 0.24, 0.22, -0.25, -0.3, 0.22, 0.18, 0.26, 0.25, 0.2, 0.26,
        0.24, 0.22, -0.25, -0.22, 0.02, 0.18, 0.26, 0.25,
      ],
      opsList: [],
      tableList: [],
      chart_sfrp_filament: null,
      chart_hea_filament: null,
      chart_unit5: null,
      chart_dc: null,
      now: '',
      notice_list: [],

      sfrp_info: {
        filament1: {
          current_weight: '1723',
          material: 'ABS',
          end_switch: 'ON',
        },
        filament2: {
          current_weight: '1149',
          material: 'ABS',
          end_switch: 'ON',
        },
        filament3: {
          current_weight: '1346',
          material: 'ABS',
          end_switch: 'ON',
        },
        filament4: {
          current_weight: '1154',
          material: 'ABS',
          end_switch: 'ON',
        },
        printer_progress: 0,
        door_status: 'open',
        vacuum_status: 'open',
        printer_status: 'idle',
        temperatureInfo: {
          nozzle1: {
            current_temperature: 53,
            target_temperature: 40,
          },
          nozzle2: {
            current_temperature: 53,
            target_temperature: 40,
          },
          buildplate: {
            current_temperature: 120,
            target_temperature: 40,
          },
          chamber: {
            current_temperature: 53,
            target_temperature: 40,
          },
        },
        nozzle1: {
          diameter: '0.8',
          material: 'ABS',
          end_switch: '开',
          fan_speed: '1500',
          flow_rate: '0.04',
        },
        nozzle2: {
          diameter: '0.6',
          material: 'ABS+',
          end_switch: '开',
          fan_speed: '1800',
          flow_rate: '0.03',
        },
        printer_error: 'Machine response time out.',
        arm_info: '回到避让位完成',
        arm_error: '更换吸盘夹具失败',
      },
      hea_info: {
        devicestate: "",
        cncstate: "",
        tankoxygen: 0,
        tankpressure: 0,
        workgaspressure: 0,
        cylinderpressure: 0,
        operareaoxygen: 0,
        fanspeed: 0,
        laserenablestate: false,
        laserpower: 0,
        powder1speed: 0,
        powder2speed: 0,
        powder3speed: 0,
        powder4speed: 0,
        powder5speed: 0,
        powder1Flow: 0,
        powder2Flow: 0,
        powder3Flow: 0,
        powder4Flow: 0,
        powder5Flow: 0,
        powder1remain: 0,
        powder2remain: 0,
        powder3remain: 0,
        powder4remain: 0,
        powder5remain: 0,
        doorstate: false,
        doorPressure: 0,
      },
      cfrp_info: {
        state: '空闲',
        laying_layers: 0,
        pressure: '',
        temp: '',
        ya_ji_alarm: '',
        plc_alarm: '',
        keep_time: '',
      },
      unit5: {
        sample_num: "",
      },
      unit4: {
        sample_num: "",
      },
      equip_info4: {
        IDMDC01: {
          sampleNumber: "CE2411220001",
          taskOn: "1",
          location: "1",
          thickness: "4.21"
        },
        DCIDM03: {
          loadingPerm: "1",
          palletStatus: "1",
          machineStatus: "Readying!",
          machineAlarmInfo: "",
          timestamp: "2024-11-23 10:58:34"
        }
      },
      equip_info5: {
        IDMWCA01: {
          sampleNumber: "",
          testType: "",
          quantity: "",
          testStandard: "",
          specification: "",
          length: "",
          gaugeOrSpan: "",
          testRate: "",
          velocityControlEnd: "",
          lowerLimitTensile: "",
          upperLimitTensile: ""
        },
        WCAIDM05: {
          loadingPerm: "0",
          fixtureType: "",
          palletStatus: "",
          robotAct: "",
          machineAct: "",
          robotAlarmInfo: "",
          machineAlarmInfo: "",
          timestamp: ""
        }
      },
      test_num_and_sample_num: {
        nums: {
          "unit1": 5,
          "unit2": 1,
          "unit3": 6,
          "unit4": 10,
          "unit5": 9
        },
        sample_number: {
          "unit1": "ST2411191438",
          "unit2": "",
          "unit3": "CE00001",
          "unit4": "CE00001",
          "unit5": "ST11221014"
        }
      }
    }
  },
  created () {
    let _that = this
    _that.now = this.getCurrentDateTime()

    this.interval_time = setInterval(() => {
      _that.now = this.getCurrentDateTime()
    }, 1000)
    this.interval_notice = setInterval(() => {
      this.getNoticeList()
      this.getHeaFilamentInfo()
      this.getUnit5ResultData()
      this.getUnit4ResultData()
      this.getStatTaskList()
      this.getHEAInfo()
      this.getSFRPInfo()
      this.getCFRPInfo()
      this.getTestNumAndSampleNum()
    }, 5000)
    // this.interval_sfrp = setInterval(() => {
    //
    // }, 3000)
  },
  mounted () {
    this.getHeaFilamentInfo()
    this.getUnit5ResultData()
    this.getUnit4ResultData()
    this.currentTitle()
    this.getStatTaskList()
    this.getNoticeList()
    this.getSFRPInfo()
    this.getCFRPInfo()
    this.getHEAInfo()
    this.getUnit4EquipInfo()
    this.getUnit5EquipInfo()
    this.getTestNumAndSampleNum()
  },
  beforeDestroy () {
    if (this.interval_time) {
      clearInterval(this.interval_time)
    }
    if (this.interval_notice) {
      clearInterval(this.interval_notice)
    }
    if (this.interval_sfrp) {
      clearInterval(this.interval_sfrp)
    }
    if (this.interval_cfrp) {
      clearInterval(this.interval_cfrp)
    }
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
    if (this.tentativeId) {
      clearInterval(this.tentativeId)
    }
  },

  computed: {
    defaultOption () {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 166, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
        scrollTime: 0, // 单步运动的时间(默认值1000ms)
        scrollNum: 1, // 单步运动的距离(默认值1)
        scrollType: 0, // 0匀速 1缓动
      }
    },
    defaultOptionTwo () {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 200, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 10000, // 单步运动停止的时间(默认值1000ms)
        scrollTime: 0, // 单步运动的时间(默认值1000ms)
        scrollNum: 1, // 单步运动的距离(默认值1)
        scrollType: 0, // 0匀速 1缓动
      }
    },
  },
  methods: {
    enterFullScreen () {
      const el = document.documentElement
      if (el.requestFullscreen) {
        el.requestFullscreen()
      } else if (el.mozRequestFullScreen) { /* Firefox */
        el.mozRequestFullScreen()
      } else if (el.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        el.webkitRequestFullscreen()
      } else if (el.msRequestFullscreen) { /* IE/Edge */
        el.msRequestFullscreen()
      }
    },
    getCurrentDateTime () {
      const now = new Date()
      const year = now.getFullYear()
      const month = ('0' + (now.getMonth() + 1)).slice(-2) // 月份是从0开始的
      const day = ('0' + now.getDate()).slice(-2)
      const hours = ('0' + now.getHours()).slice(-2)
      const minutes = ('0' + now.getMinutes()).slice(-2)
      const seconds = ('0' + now.getSeconds()).slice(-2)

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    currentTitle () {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth()
      return year.toString() + '年' + (month + 1).toString() + '月'
    },
    todayStr () {
      const now = new Date()
      const month = now.getMonth()
      const date = now.getDate()
      return (month + 1).toString() + '-' + date.toString()
    },
    // 复合材料3D打印
    createSFRPFilamentChart (material_list,value_list) {
      // 基于准备好的dom，初始化echarts实例
      if (!this.chart_sfrp_filament) {
        this.chart_sfrp_filament = echarts.init(document.getElementById('fhcl'))
      }
      var option
      var colorArray = [{
        top: '#ffa800', //黄
        bottom: 'rgba(11,42,84,.3)',
      },
        {
          top: '#1ace4a', //绿
          bottom: 'rgba(11,42,84, 0.3)',
        },
        {
          top: '#4bf3ff', //蓝
          bottom: 'rgba(11,42,84,.3)',
        },
        {
          top: '#4f9aff', //深蓝
          bottom: 'rgba(11,42,84,.3)',
        },
      ]
      option = {
        backgroundColor: '',
        tooltip: {
          show: true,
          formatter: '{b}:{c}g',
        },
        grid: {
          left: '5%',
          top: '12%',
          right: '12%',
          bottom: '8%',
          containLabel: true,
        },

        xAxis: {
          type: 'value',
          show: false,
          position: 'top',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [{
          type: 'category',
          axisTick: {
            show: false,
            alignWithLabel: false,
            length: 5,
          },
          splitLine: {
            //网格线
            show: false,
          },
          inverse: 'true', //排序
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            },
          },
          data: material_list,
        },],
        series: [{
          name: '能耗值',
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            formatter: '{c}g',
            color: 'white', //color of value
          },
          itemStyle: {
            show: true,
            color: function (params) {
              let num = colorArray.length
              return {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: colorArray[params.dataIndex % num].bottom,
                },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                ],
                //globalCoord: false
              }
            },
            borderRadius: 70,
            borderWidth: 0,
            borderColor: '#333',
          },
          barGap: '0%',
          barCategoryGap: '50%',
          data: value_list,
        },],
      }
      option && this.chart_sfrp_filament.setOption(option)
    },
    // 金属3D打印料仓信息
    getHeaFilamentInfo() {
      axios.get('/admin/unit2/filamentInfo').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        let result = res.data.data
        // console.log("getHeaFilamentInfo",result)
        this.createHeaFilamentChart(result.material_list,result.value_list)
      }).catch(err => {
        console.log('getHeaFilamentInfo error', err)
      })
    },
    createHeaFilamentChart (material_list,value_list) {
      // 基于准备好的dom，初始化echarts实例
      if (!this.chart_hea_filament) {
        this.chart_hea_filament = echarts.init(document.getElementById('jscl'))
      }
      var option
      var colorArray = [
        {
          top: '#4bf3ff', //蓝
          bottom: 'rgba(11,42,84,.3)',
        },
      ]
      option = {
        backgroundColor: '',
        tooltip: {
          show: true,
          formatter: '{b}:{c}%',
        },
        grid: {
          left: '5%',
          top: '12%',
          right: '12%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          show: false,
          position: 'top',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [{
          type: 'category',
          axisTick: {
            show: false,
            alignWithLabel: false,
            length: 5,
          },
          splitLine: {
            //网格线
            show: false,
          },
          inverse: 'true', //排序
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
            },
          },
          axisLabel: {
            rich: {
              a: {
                color: '#fff',
                backgroundColor: '#f0f',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2,
              },
            },
          },
          data: material_list
        },],
        series: [{
          name: '能耗值',
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            formatter: '{c}%',
            color: 'white', //color of value
          },
          itemStyle: {
            show: true,
            color: function (params) {
              let num = colorArray.length
              return {
                type: 'linear',
                colorStops: [{
                  offset: 0,
                  color: colorArray[params.dataIndex % num].bottom,
                },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                  {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom,
                  },
                  {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top,
                  },
                ],
                //globalCoord: false
              }
            },
            borderRadius: 70,
            borderWidth: 0,
            borderColor: '#333',
          },
          barGap: '0%',
          barCategoryGap: '50%',
          data: value_list,
        },],
      }
      option && this.chart_hea_filament.setOption(option)
    },
    // 力学表征数据
    getUnit5ResultData () {
      axios.get('/admin/unit5/resultData').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        let result = res.data.data
        this.unit5.sample_num = result.sample_num
        this.createUnit5EChart1(result.xLine,result.yLine)
        // this.notice_list = res.data.data.list
      }).catch(err => {
        console.log('getNoticeList error', err)
      })
    },
    // 力学表征图表
    createUnit5EChart1(xLine,yLine) {
      let option = {
        grid: {
          left: '25px',
          right: '20px',
          top: '20px',
          bottom: '20px',
        },
        xAxis: {
          type: 'category',
          data: xLine,
          axisLabel: {
            color: '#6a9cd5',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#6a9cd5',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#233e64',
            },
          },
        },
        series: [
          {
            type: 'line',
            data: yLine,
            showSymbol: false,
          }
        ]
      };
      if (!this.chart_unit5) {
        this.chart_unit5 = echarts.init(document.getElementById('lxbz'))
      }
      option && this.chart_unit5.setOption(option)
      // console.log('option:', option)
    },
    // 电磁数据图表
    getUnit4ResultData () {
      // 基于准备好的dom，初始化echarts实例
      axios.get('/admin/unit4/resultDataScreen').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        let result = res.data.data
        this.unit4.sample_num = result.info.sample_num;
        this.series_list = result.series_list
        if(this.series_list.length > 0) {
          this.series_index = 0
          this.onSeriesChange(0)
        }
        // this.createUnit5EChart1(result.xLine,result.yLine)
      }).catch(err => {
        console.log('resultData error', err)
      })
    },
    onSeriesChange(i) {
      if([0,1,2].indexOf(i) !== -1) {
        let data = this.series_list[i]
        // return
        // console.log("data",data)
        let series = [];
        for (let item of data.series) {
          series.push({
            name: item.name,
            type: "line",
            // stack: 'Total',
            smooth: true,
            showSymbol: false,
            data: item.data,
          });
        }
        this.createUnit4EChart1(data['name'],data['legend_data'],data['xLine'],series)
      }
    },
    createUnit4EChart1(name,legend,xLine,series) {
      if (!this.chart_dc) {
        this.chart_dc = echarts.init(document.getElementById('dcbz'))
      }
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legend,
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: xLine,
          axisLabel: {
            color: '#6a9cd5',
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: '#6a9cd5',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#233e64',
            },
          },
        },
        series: series,
        grid: {
          x: 25,
          y: 20,
          x2: 0,
          y2: 20,
        },
      }
      option && this.chart_dc.setOption(option)
    },
    getNoticeList () {
      axios.get('/api/notice_list').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        // console.log("notice_list",res.data.data.list)
        this.notice_list = res.data.data.list
      }).catch(err => {
        console.log('getNoticeList error', err)
      })
    },
    substr (str) {
      return str.slice(5, 16)
    },
    getSFRPInfo () {
      axios.get('/api/sfrp_info').then(res => {
        // console.log("fucai_info",res)
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        let sfrp_info = res.data.data.info
        // console.log("sfrp_info",sfrp_info)
        let material_list = []
        let value_list = []
        material_list.push(sfrp_info.filament1.material+" (料仓1)")
        material_list.push(sfrp_info.filament2.material+" (料仓2)")
        material_list.push(sfrp_info.filament3.material+" (料仓3)")
        material_list.push(sfrp_info.filament4.material+" (料仓4)")
        value_list.push(sfrp_info.filament1.current_weight)
        value_list.push(sfrp_info.filament2.current_weight)
        value_list.push(sfrp_info.filament3.current_weight)
        value_list.push(sfrp_info.filament4.current_weight)
        this.createSFRPFilamentChart(material_list,value_list)
        this.sfrp_info = sfrp_info
      }).catch(err => {
        console.log('getSFRPInfo error==========', err)
      })
    },
    getCFRPInfo () {
      axios.get('/admin/unit3/equip_info').then(res => {
        // console.log("fucai_info",res)
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        this.cfrp_info = res.data.data.info
      }).catch(err => {
        console.log('pointList error', err)
      })
    },
    getCFRPValue(list,label) {
      for(let item of list) {
        if(item.label === label) {
          return item.v
        }
      }
      return ""
    },
    // 金属3D打印料仓信息
    getStatTaskList() {
      axios.get('/admin/stat/taskList').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        let taskList = res.data.data
        this.tableList = taskList
      }).catch(err => {
        console.log('getHeaFilamentInfo error', err)
      })
    },
    getHEAInfo () {
      axios.get('http://10.64.44.101:9992/api/hea_info').then(res => {
        // console.log("fucai_info",res)
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        // console.log("hea_info",res.data.data.info)
        this.hea_info = res.data.data.info
      }).catch(err => {
        console.log('hea_info error==========', err)
      })
    },
    getUnit4EquipInfo () {
      axios.get('http://10.64.44.101:9994/api/equip_info').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        // console.log("equip_info4",res.data.data)
        this.equip_info4 = res.data.data.equip_info
      }).catch(err => {
        console.log('equip_info4 error==========', err)
      })
    },
    getUnit5EquipInfo () {
      axios.get('http://10.64.44.101:9995/api/equip_info').then(res => {
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        // console.log("equip_info5",res.data.data)
        this.equip_info5 = res.data.data.equip_info
      }).catch(err => {
        console.log('equip_info5 error==========', err)
      })
    },
    getTestNumAndSampleNum () {
      axios.get('/admin/stat/testNumAndCNumber').then(res => {
        // console.log("fucai_info",res)
        if (res.status !== 200) {
          console.log('http_status 异常', res.status)
          return
        }
        if (res.data.code !== 0) {
          console.log('api message: ', res.data.message)
          return
        }
        this.test_num_and_sample_num = res.data.data
      }).catch(err => {
        console.log('pointList error', err)
      })
    },
  },
}
</script>

<style scoped>
.main {
  width: 1920px;
  height: 1080px;
  background: #09161c;
  background-image: url("../assets/bg.png");
  background-size: 100%;
}

#img {
  width: 1920px;
  height: 88px;
}

.all {
  display: flex;
}

.labLeft {
  display: flex;
  flex-direction: column;
  margin: -33px 19px 0 21px;
}

.labEnvironment {
  width: 467px;
  height: 169px;
  display: flex;
  justify-content: space-around;
  background-image: url("../assets/syshj.png");
  background-size: 100%;
}

.temp {
  width: 206px;
  height: 74px;
  margin-top: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../assets/syswd.png");
  background-size: 100%;
}

.humidity {
  width: 206px;
  height: 74px;
  margin-top: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../assets/syssd.png");
  background-size: 100%;
}

.syswd {
  height: 20px;
  font-size: 14px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
  color: rgba(3, 255, 255, 0.76);
  line-height: 8px;
}

.num {
  width: 20px;
  height: 36px;
  font-size: 26px;
  font-family: Barlow, Barlow-Condensed Medium;
  font-weight: normal;
  color: #3de7e7;
  line-height: 50px;
}

.dw {
  width: 17px;
  height: 26px;
  font-size: 22px;
  font-family: Barlow, Barlow-Condensed Medium;
  font-weight: normal;
  color: #3de7e7;
  line-height: 41px;
}

.intervene {
  width: 467px;
  height: 278px;
  margin-top: 18px;
  background-image: url("../assets/sygy.png");
  background-size: 100%;
}

.remindMain {
  height: 60%;
  margin: 60px 0 0 20px;
  display: flex;
  overflow: scroll;
  flex-direction: column;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

.remind {
  font-size: 14px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
  color: #ffffff;
  display: flex;
  margin-bottom: 10px;
}

#new {
  /* width: 69px; */
  height: 24px;
  display: flex;
  font-size: 14px;
  line-height: 24px;
  margin-left: 20px;
  justify-content: center;
}

.tag {
  width: 69px;
  height: 24px;
  background-size: 100%;
  background-image: url("../assets/14.png");
}

#tagert {
  position: relative;
  left: 30px;
}

.testingTable {
  width: 906px;
  height: 432px;
  background-image: url("../assets/9.png");
  background-size: 100%;
}

.testingTitle {
  width: 90%;
  height: 40px;
  display: flex;
  color: #fff;
  margin: 30px auto 0;
  align-items: center;
  justify-content: space-between;
}

.newTesing {
  width: 76px;
  height: 30px;
  background-image: url("../assets/3.png");
  background-size: 100%;
  font-size: 14px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
  font-weight: 500;
  text-align: center;
  color: #03ffff;
  line-height: 30px;
}

.centery {
  width: 55%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  justify-content: space-between;
  font-size: 22px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.6);
}

#lll {
  width: 62px;
  height: 12px;
}

#rrr {
  width: 62px;
  height: 12px;
}

.testingHistroy {
  width: 76px;
  height: 30px;
  background-image: url("../assets/3.png");
  background-size: 100%;
  font-size: 14px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Medium;
  font-weight: 500;
  text-align: center;
  color: #03ffff;
  line-height: 30px;
}

.testingContent {
  width: 813px;
  height: 30px;
  opacity: 0.32;
  color: #fff;
  display: flex;
  margin: 0 auto;
  text-align: left;
  justify-content: space-around;
  background: linear-gradient(180deg, rgba(79, 255, 251, 0), #4ffffb);
  border-radius: 4px;
}

.tableList {
  width: 813px;
  height: 40px;
  background: rgba(79, 255, 251, 0.05);
  border: 1px solid rgba(79, 255, 251, 0.3);
  border-radius: 4px;
  margin: 6px auto;
  color: #fff;
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  text-align: left;
  align-items: center;
}

.equipmentMonitoring {
  width: 1391px;
  height: 520px;
  margin: 13px 18px 0 21px;
  background-image: url("../assets/sbjc.png");
  background-size: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#change {
  width: 32px;
  height: 137px;
  margin-top: -20px;
}

.equipmentList {
  width: 93%;
  margin: 0 auto;
  display: flex;
}

.unit {
  width: 248px;
  /* height: 179px; */
  margin: 0 8px;
  background-image: url("../assets/16.png");
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unitTxt {
  font-size: 19px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Bold;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  padding-top: 5px;
  text-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.6);
}

.testInfo {
  width: 225px;
  height: 56px;
  background-size: 100%;
  color: #fff;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 24px;
  background-image: url("../assets/17.png");
}

.equipInfo {
  width: 225px;
  height: 25px;
  background: #00505a;
  border-radius: 12px;
  display: flex;
  margin-top: 10px;
  line-height: 25px;
  justify-content: space-between;
}

.equxxx {
  font-size: 15px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
  color: #ffffff;
  padding-left: 10px;
}

.equyyy {
  font-size: 15px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
  color: #4ffffb;
  padding-right: 10px;
}

.ThreeImg {
  width: 222px;
  height: 116px;
  margin: 20px 0 0 5px;
}

.rightTablefh {
  width: 467px;
  height: 210px;
  margin: -33px 0 14px 0;
  background: url("../assets/fh3D.png");
  background-size: 100%;
}

.rightTablejs {
  width: 467px;
  height: 243px;
  margin: 0 0 14px 0;
  background: url("../assets/js3D.png");
  background-size: 100%;
}

.rightTablelx {
  width: 467px;
  height: 252px;
  margin: 0 0 14px 0;
  background: url("../assets/lxbzsy.png");
  background-size: 100%;
}

.rightTabledc {
  width: 467px;
  height: 254px;
  margin: 0 0 14px 0;
  background: url("../assets/dcbzsy.png");
  background-size: 100%;
}

#fhcl {
  width: 100%;
  height: 80%;
  display: inline-block;
  margin: 20px 0 0 0;
}

.intro {
  opacity: 0.52;
  font-size: 13px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
  color: #ffffff;
  padding: 0 0 0 40px;
}

#jscl {
  width: 100%;
  height: 80%;
  display: inline-block;
  margin: 20px 0 0 0;
}

#lxbz {
  width: 100%;
  height: 90%;
  display: inline-block;
  margin: 0 0 0 0;
  position: relative;
}

.lxbzbg {
  width: 95%;
  height: 85%;
  display: inline-block;
  margin: 15px 0 0 10px;
  background-image: url("../assets/lxbg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

#dcbz {
  width: 100%;
  height: 90%;
  display: inline-block;
  /*background-color: #00505a;*/
}

.dcbzbg {
  width: 95%;
  height: 88%;
  display: inline-block;
  margin: 15px 0 0 10px;
  background-image: url("../assets/dcbg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>
